
<table class="layui-hide" id="Amount" lay-filter="Amount"></table>

<script type="text/html" id="search">
  <div class="demoTable">
    搜索客户名称或年份：
    <div class="layui-inline">
      <input class="layui-input" name="id" id="demoReload">
    </div>
    <a class="layui-btn" lay-event="search">搜索</a>
  </div>
</script>
<div id="main1" style="width: 50%;height:400px;margin: 0 auto;"></div>
<div id="main2" style="width: 50%;height:400px;margin: 0 auto;"></div>

<script>
let main1 = document.getElementById('main1');
let main2 = document.getElementById('main2')
var myChart1 = echarts.init(main1);
var myChart2 = echarts.init(main2);
layui.use(['table', 'jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;
	console.log(table)
  
    //第一个实例
    table.render({
      elem: '#Amount'
      ,url: 'http://localhost:8080/orders/getOrdersList' //数据接口
      ,cols: [[ //表头
      {checkbox: true}
     ,{field:'orNo', title: '订单编号',width:150,align:'center'}
     ,{field:'cusNo', title: '客户编号',align:'center'}
     ,{field:'cusName', title: '客户名称',align:'center'}
     ,{field:'orTotalPrice', title: '总金额',align:'center',templet:function(row){
        return parseFloat(row.orTotalPrice) / 10000 + '万'
     }}
     ,{field:'orDate',title: '下单时间',align:'center'}
      ]]
      ,page: true //允许显示分页工具栏
      // ,height:'full-160'  //设置表格的高度
      ,limit:5
      ,limits:[5,10,15,20,25,30]
      ,toolbar:'#search' //设置整个表格的工具栏
      ,defaultToolbar:[] //设置默认工具栏不显示
      ,text: {
        none:'暂无数据！'
      }
  });


  table.on('toolbar(Amount)', function(obj){
    switch(obj.event) {
      case 'search':
        var key = $('#demoReload').val();
        // 这里需要判断传入的是可以名还是年份
        let obj = null;
        var reg = /^[0-9]+.?[0-9]*$/
        if (reg.test(key)) {
          // 全部是数字默认为年份
          obj = {where: {orDate:key, cusName:null}};
          main1.style.display = "none"; 
          main2.style.display = "block";
          let title = key + '年的销售情况';
          drawOptions({"searchInfo":key, "isNumber":true}, dealDateFun, title);
        }
        else {
          obj = {where: {cusName:key, orDate:null}};
          if (key != '') {
            main1.style.display = "block"; 
            main2.style.display = "none";       
            drawOptions({"searchInfo":key, "isNumber":false}, dealNameFun);
          }
          else {
            main1.style.display = "none";
            main2.style.display = "none";
          }
        }
        //执行重载
        // new Promise((resolvt, reject) => {
            table.reload('Amount', {
            url: 'http://localhost:8080/orders/getOrdersList',
            page: {
              curr: 1 //重新从第 1 页开始
            },
            ...obj
          });

        // }).then
    }
  });

  function drawOptions(obj, func, title='') {
    $.ajax({
            url:'http://localhost:8080/orders/getDrawOptions',
            type:'post',
            dataType:'json',
            data:obj,
            success: function(data) {
              func(data, title);
            },
            error: function() {
              console.log("error,please replay");
            }
        })
  }

  // 查询条件是Name，重构数据
  function dealNameFun(data) {
    if (data.x.length !== 0) {
      option1.xAxis[0].data = data.x;
      let max = Math.max.apply(null, data.y);
      option1.yAxis[0].max = max + 10;
      option1.series[0].data = data.y;
      option1.series[1].data = data.line;
      myChart1.setOption(option1);
    }
  }

  function dealDateFun(data, title) {
    if (data.x.length !== 0) {
      option2.title.text = title;
      option2.xAxis.data = data.x;
      option2.series[0].data = data.y;
      myChart2.setOption(option2);
    }
  }
// optins参数

option1 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['总金额', '走势']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '总金额',
            min: 0,
            max: 250,
            interval: 5,
            axisLabel: {
                formatter: '{value}万元'
            }
        }
    ],
    series: [
        {
            name: '总金额',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            barWidth: 30,
        },
        {
            name: '走势',
            type: 'line',
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: '#85B8C5', //改变折线点的颜色
                lineStyle: {
                  color: '#85B8C5' //改变折线颜色
                }
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};
 
option2 = {
    title: {
        text: 'xxx年的销售情况'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销售额']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        name: '销售金额',
        interval: 5,
        axisLabel: {
            formatter: '{value}万元'
        }
    },
    series: [
        {
            name: '销售额',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },

    ]
};
});
</script>
      
  

<!-- 
  这部分构思：
  管理员进入界面可以看到全部页面
  可以根据用户名和年份进行查询
  根据用户名查询：建立x-年份与y-总金额关系图
  根据年份查询：建立x-用户名与y-总金额关系图 需要修改图的title
 -->


 <!-- 
   智联招聘
   前程无忧
   应届人才招聘网
   关注邮电
  -->

  <!-- https://blog.csdn.net/m0_37034294/article/details/82917234 -->